<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>信用卡预付</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.css" rel="stylesheet" />
		<link href="../mui/css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.picker.min.css" />
		<style type="text/css">
			/* 重写--开始 */
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.mui-table-view {
				position: relative;
				margin-bottom: 0.8rem;
				background-color: #fff;
				line-height: 1.41176471;
				font-size: 0.7rem;
			}
			
			.mui-table-view-cell {
				position: relative;
				height: 3rem;
				padding: 0.5rem 0.6rem;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.mui-table-view-cell:after {
				left: 0;
			}
			
			.mui-btn {
				border: none;
			}
			
			.mui-btn-block {
				width: inherit;
			}
			/* 重写--结束 */
			
			.mui-table-view-cell__bd {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			
			.hotel-fixed-area img {
				width: 0.6rem;
			}
			
			li.username,
			li.tel {
				justify-content: space-between;
			}
			
			li.username label {
				width: 20%;
			}
			
			li.username input,
			li.tel input {
				border: none;
				background: transparent;
				font-size: 0.6rem;
				color: #b3b3b3;
				letter-spacing: 1px;
				margin-bottom: 0;
				text-align: right;
			}
			
			.font14 {
				color: #333;
				font-size: 0.7rem;
			}
			
			.font-right {
				margin-right: 1rem;
				font-size: 0.7rem;
				color: #333;
			}
			
			.desc {
				padding: 0 0.6rem;
				color: #666;
				font-size: 0.6rem;
			}
			
			.foot {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 2.5rem;
				background-color: #fff;
				padding: 0 0.6rem;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #ddd;
			}
			
			.price {
				color: #ff0066;
			}
			
			.submit {
				border: none;
				color: #fff;
				background-color: #ff0066;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">信用卡预付</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-btn-block" id='showUserPicker'>
					<div class="mui-table-view-cell__bd">
						<span class="font14">发卡行</span>
					</div>
					<div class="hotel-list-price font-right">
						<div id='userResult' class="ui-alert"></div>
					</div>
					<div class="hotel-fixed-area">
						<img src="../styles/images/down.png" />
					</div>
				</li>
				<li class="mui-table-view-cell username">
					<label>卡号</label>
					<input type="text" placeholder="请填写卡号" />
				</li>
				<li id="demo4" class="mui-table-view-cell hotel-list  btn mui-btn-block" data-options='{"type":"date"}'>
					<div class="mui-table-view-cell__bd">
						<span class="font14">有效期</span>
					</div>
					<div class="hotel-list-price font-right">
						<div id='result' class="ui-alert"></div>
					</div>
					<div id="demo4" class="hotel-fixed-area">
						<img src="../styles/images/down.png" />
					</div>
				</li>
				<li class="mui-table-view-cell username">
					<label>持卡人</label>
					<input type="text" placeholder="持卡人姓名" />
				</li>
			</ul>
			<div class="desc">
				<span>预付规则：预订此产品需要您预付全额房费。订单一经确认，不可变更/取消。未如约入住，房费将不予退还。</span>
			</div>
		</div>
		<div class="foot">
			<span class="price">￥298</span>
			<button class="submit" type="submit" data-url="./pay-successful.html">确认支付</button>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script src="../mui/js/mui.picker.js"></script>
		<script src="../mui/js/mui.picker.min.js"></script>
		<script src="../mui/js/mui.poppicker.js"></script>
		<script src="../mui/js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../mui/js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'zs',
						text: '招商银行'
					}, {
						value: 'js',
						text: '建设银行'
					}, {
						value: 'cn',
						text: '中国银行'
					}, {
						value: 'jt',
						text: '交通银行'
					}, {
						value: 'zgny',
						text: '中国银行'
					}, {
						value: 'ms',
						text: '民生银行'
					}, {
						value: 'pf',
						text: '浦发银行'
					}, {
						value: 'pa',
						text: '平安银行'
					}, {
						value: 'zx',
						text: '中信银行'
					}, {
						value: 'gd',
						text: '光大银行'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.innerText = JSON.stringify(items[0]);
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
				
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							result.innerText = '选择结果: ' + rs.text;
							picker.dispose();
						});
					}, false);
				});
			})(mui, document);
		</script>
	</body>

</html>